{% extends "base.html" %}
{% load static %}
{% load web_extras %}
{% load render_bundle from webpack_loader %}
{% load comments humanize %}

{% block stylesheets %}
	{{ block.super }}
	{% include "games/stylesheets.html" %}
{% endblock %}

{% block error_reporting %}
	{% comment %}Disable error reporting since it conflicts with Joust's Sentry{% endcomment %}
{% endblock %}

{% block meta %}
{% with replay.generate_description as description %}
	{{ block.super }}
	<meta property="og:title" content="{{ title }}" />
	<meta property="og:description" content="{{ description }}" />
	<meta property="og:url" content="{{ canonical_url }}" />
	<meta property="og:image" content="{% static_absolute 'images/hsreplay-thumbnail.png' %}" />
	<meta property="og:image:width" content="400" />
	<meta property="og:image:height" content="400" />
	<link rel="canonical" href="{{ canonical_url }}" />
	<meta name="date" content="{{ replay.global_game.match_start|date:"c" }}">
	<meta name="description" content="{{ description }}" />
	{% if twitter_card == "player" %}
		<meta name="twitter:card" content="player" />
		<meta name="twitter:player" content="{% url 'games_replay_embed' replay.shortid %}" />
		<meta name="twitter:player:width" content="640" />
		<meta name="twitter:player:height" content="360" />
		<meta name="twitter:player:image" content="{% static_absolute 'images/joust-thumbnail.png' %}" />
	{% elif twitter_card == "summary" %}
		<meta name="twitter:card" content="summary" />
	{% endif %}
	<meta name="twitter:title" content="{{ title }}" />
{% endwith %}
{% endblock %}

{% block title %}{{ title }}{% endblock title %}

{% block fullcontent %}
<div id="tabletop" class="container-fluid">
	<div class="row full_height">
		<div class="col-lg-10 col-md-9 col-sm-12 col-xs-12 full_height">
			<div class="full_height">
				{% include 'noscript.html' %}
				<div id="joust-container" class="full_height"
					data-replayurl="{{ replay.replay_xml.url }}"
					{% if user.is_authenticated %}data-locale="{{ user.locale }}"{% endif %}
					{% if user.joust_autoplay is False %}data-autoplay="false"{% endif %}
					{% for player in players %}
				 		data-player{{ forloop.counter }}="{{ player }}"
					{% endfor %}
				></div>
			</div>
		</div>
		<div class="col-xs-12 visible-xs visible-sm">
			<br/>
		</div>
		<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
			{% with replay.global_game as gg %}
			<div id="replay-infobox" data-shortid="{{ replay.shortid }}">
				{% if gg.is_ranked %}
					<h1>
						Ranked
						{% if gg.format.name == "FT_STANDARD" %}
							 - Standard
						{% elif gg.format.name == "FT_WILD" %}
							 - Wild
						{% endif %}
					</h1>
				{% elif gg.is_casual %}
					<h1>
						Casual
						{% if gg.format.name == "FT_STANDARD" %}
							 - Standard
						{% elif gg.format.name == "FT_WILD" %}
							 - Wild
						{% endif %}
					</h1>
				{% elif gg.is_tavern_brawl %}
					<h1>Tavern Brawl</h1>
				{% elif gg.game_type.name == "BGT_ARENA" %}
					<h1>Arena</h1>
				{% elif gg.game_type.name == "BGT_FRIENDS" %}
					<h1>Friendly Match</h1>
				{% else %}
					<h1>Ranked</h1>
				{% endif %}

				<h2>Share{% if user.is_staff %}<strong class="pull-right">{{ replay.views }} views</strong>{% endif %}</h2>
				<div id="share-game-dialog" data-url="{{ canonical_url }}"></div>

				<h2>Players</h2>
				<ul id="infobox-players">
					{% for player in players %}
						<li>
							{{ player }}
							{# TODO: Make this an API call (inefficient as-is) #}
							{% with player.deck_list.all_includes as decklist %}
							{% if decklist %}
								<a class="infobox-value {% if player.is_ai %}player-ai{% endif %} {% if player.is_first %}player-first{% endif %}"
									onclick="$('#infobox-deck-{{ player.player_id }}').toggle()" href="javascript:;">
									Show deck
								</a>
								<ul id="infobox-deck-{{ player.player_id }}" style="display: none;">
									{% for card in decklist %}
										<li>{{ card }}</li>
									{% endfor %}
								</ul>
							{% endif %}
							{% endwith %}
						</li>
					{% endfor %}
				</ul>
				<h2>Game</h2>
				<ul id="infobox-game">
					<li>Played <span class="infobox-value"> {{ gg.match_start|naturaltime }} </span></li>
					{% if replay.build %}
						<li>Build <span class="infobox-value"> {{ replay.build }} </span></li>
					{% endif %}
					{% if gg.ladder_season %}
						<li>Season <span class="infobox-value"> {{ gg.ladder_season }} </span></li>
					{% endif %}
					<li>Turns <span class="infobox-value"> {{ gg.num_own_turns }} </span></li>
					{% if replay.spectator_mode %}
						<li>Spectator mode <span class="infobox-value">POV: {{ replay.friendly_player.name }}</span></li>
					{% endif %}
				</ul>

				{% comment %}
				<h2>Related</h2>
				<ul id="infobox-related">
					<li class="related-empty">No similar games found</li>
					<!-- This is too slow, it's killing the server. Figure out how to optimize it before uncommenting. -->
					{% for recommendation in replay.related_replays %}
						<li><a href="{{ recommendation.replay.get_absolute_url }}">{{ recommendation.replay }}</a></li>
					{% empty %}
						<li class="related-empty">No similar games found!</li>
					{% endfor %}
				</ul>
				{% endcomment %}

				<h2>Controls</h2>
				<ul class="infobox-settings">
					{% if user == replay.user %}
						<li class="clearfix">Visibility <span class="infobox-value" id="replay-visibility" data-selected="{{ replay.visibility.value }}"></span></li>
						<li class="clearfix">Delete <span class="infobox-value" id="replay-delete" data-redirect="{% url 'my_replays' %}"></span></li>
					{% endif %}
					{% if user.is_staff %}
						<li>View in Admin<span class="infobox-value"><a href="{% url 'admin:games_gamereplay_change' replay.id %}">Link</a></span></li>
					{% endif %}
					<!-- TODO: move this to Joust itself, in the extra menu -->
					<li><a href="{{ replay.replay_xml.url }}" download="{{ replay.shortid }}.hsreplay.xml">Download XML</a></li>
				</ul>
			</div>
			{% endwith %}
		</div>
	</div>
</div>

<script src="{% joust_static 'joust.js' %}"></script>
<script>if(typeof Joust === "undefined") var Joust = null;</script>
{% render_bundle "replay_detail" %}

<div id="replay-comments" class="container-fluid">
		<div class="row">
		<div class="col-lg-4 col-xs-12">
			<h2>Comments</h2>

			{% if user.is_authenticated %}
				{% get_comment_form for replay as form %}
				<form id="comment-form" action="{% comment_form_target %}" method="post">
					{% csrf_token %}
					{# {{ form.comment }} #}
					<textarea name="comment" rows="10" class="form-control" cols="40" id="id_comment" maxlength="3000" required></textarea>
					{{ form.honeypot }}
					{{ form.content_type }}
					{{ form.object_pk }}
					{{ form.timestamp }}
					{{ form.security_hash }}
					<input type="hidden" name="next" value="{{ replay.get_absolute_url }}"/>

					<em>Note: Your Battletag will be visible to other users.</em>
					<input type="submit" value="Post" class="btn btn-primary"/>
				</form>
			{% endif %}

			{% render_comment_list for replay %} {# comments/list.html #}
		</div>
	</div>
</div>

{% endblock %}
